<template>
	<view class="finish_pay_container">
		<view class="header_pay">
			<view class="order_num">
				<text>订单号：&nbsp;</text>
				<text>{{order_id}}</text>
			</view>
			<view class="pay_money">
				<text>支付金额：&nbsp;</text>
				<text class="money">￥{{price}}</text>
			</view>
		</view>
		<view class="pay_ways">
			<view class="quickPay">快捷支付</view>
			<u-divider half-width="100%"></u-divider>
			<view class="radio_group">
				<u-radio-group v-model="payWays" size="40" wrap active-color="#59d58b" @change="paySel">
					<u-radio name="wallet" class="radio" checked>
						<text class="radioText">钱包(余额：15007元)</text>
					</u-radio>
					<u-divider half-width="100%"></u-divider>
					<u-radio name="alipay" class="radio">
						<text class="radioText">支付宝支付</text>
					</u-radio>
					<u-divider half-width="100%"></u-divider>
					<u-radio name="wechat" class="radio">
						<text class="radioText">微信支付</text>
					</u-radio>
					<u-divider half-width="100%"></u-divider>
					<u-radio name="online" class="radio">
						<text class="radioText">网银支付</text>
					</u-radio>
					<u-divider half-width="100%"></u-divider>
				</u-radio-group>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="sure_btn" @click="sure">
			<view><text>保存</text></view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(option) {
			console.log(option)
			this.optionSel = option.sel;
			this.order_id = option.order_id;
			this.price = option.price;
			this.add_projetName = option.add_projetName;
		},
		data() {
			return {
				//支付方式
				payWays: 'wallet',
				//总价格
				price: '',
				//选中的加项id
				optionSel: '',
				//订单id
				order_id: '',
				//选中的支付方式中文
				payway: 'wallet',
				//已体检加项的名称
				add_projetName:"",
			}
		},
		methods: {
			//点击确定 
			sure() {
				let {payWays} = this;
				if (payWays === "wallet") {
					this.payway = '钱包';
				} else if (payWays === "alipay") {
					this.payway = '支付宝';
				} else if (payWays === "wechat") {
					this.payway = '微信';
				} else if (payWays === "online") {
					this.payway = '网银';
				}
				this.$http({
					url: "/hasPay",
					data: {
						order_id: this.order_id,
						add_projetName:this.add_projetName,
						sel:this.optionSel,
						payway:this.payway,
						price:this.price,
					}
				})
			},
			//勾选支付方式
			paySel(value) {
				if (value === "wallet") {
					this.payway = '钱包';
				} else if (value === "alipay") {
					this.payway = '支付宝';
				} else if (value === "wechat") {
					this.payway = '微信';
				} else if (value === "online") {
					this.payway = '网银';
				}
			}
		}
	}
</script>

<style lang="scss">
	.finish_pay_container {
		.header_pay {
			font-size: 32rpx;
			margin: 30rpx 20rpx;
			background-color: rgba(221, 221, 221, 0.2);
			padding: 30rpx 0;

			.order_num {
				height: 80rpx;
				border-bottom: 1px solid #ccc;
				padding-bottom: 30rpx;
			}

			.pay_money {
				margin-top: 30rpx;

				.money {
					font-weight: 700;
					font-style: normal;
					font-size: 20px;
					color: #FF6600;
				}
			}
		}

		// 支付方式
		.pay_ways {
			padding: 20rpx;
			background-color: rgba(221, 221, 221, 0.1);

			.quickPay {
				font-size: 34rpx;
				color: #455154;
				margin-bottom: 10rpx;
			}

			.radio {
				padding: 30rpx;

				.radioText {
					margin-left: 30rpx;
					font-size: 35rpx;

				}
			}
		}

		// 底部按钮
		.sure_btn {
			width: 750rpx;
			height: 96rpx;
			background-color: #59b58d;
			color: white;
			font-size: 18px;
			text-align: center;
			position: fixed;
			bottom: 0;
			line-height: 96rpx;
		}
	}
</style>
